@import '@bifrostui/styles/mixins/index.less';

.bui-picker {
  --header-height: var(--bui-picker-header-height, 50px);
  --header-padding: var(--bui-picker-header-padding, 0 var(--bui-spacing-lg));
  --cancel-height: var(--bui-picker-cancel-height, 100%);
  --cancel-line-height: var(--bui-picker-cancel-line-height, 50px);
  --confirm-height: var(--bui-picker-confirm-height, 100%);
  --confirm-line-height: var(--bui-picker-confirm-line-height, 50px);
  --panel-container-height: var(--bui-picker-panel-height, 260px);
  --indicator-top: var(--bui-picker-indicator-top, 108px);
  --option-height: var(--bui-picker-option-height, 36px);
  --bui-picker-confirm-disabled-opacity: 0.38;
  font-family: var(--bui-font-family);

  .bui-drawer-content {
    border-radius: var(--bui-shape-radius-drawer) var(--bui-shape-radius-drawer)
      0 0;
  }

  &-header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--header-padding);
  }

  &-cancel {
    cursor: pointer;
    height: var(--cancel-height);
    font-size: var(--bui-title-size-4);
    text-align: center;
    line-height: var(--cancel-line-height);
    color: var(--bui-color-fg-default);
  }

  &-title {
    font-size: var(--bui-title-size-3);
    color: var(--bui-color-fg-default);
    font-weight: var(--bui-font-weight-medium);
  }

  &-confirm {
    cursor: pointer;
    height: var(--confirm-height);
    font-size: var(--bui-title-size-4);
    text-align: center;
    line-height: var(--confirm-line-height);
    color: var(--bui-color-primary);

    &-disabled {
      color: var(--bui-color-fg-default);
      opacity: var(--bui-picker-confirm-disabled-opacity);
    }
  }

  &-container {
    width: 100%;
    height: var(--panel-container-height);
    display: flex;
    overflow: hidden;
  }
}
